<template>
  <section class="container">
    <no-ssr>
      <div
        v-masonry
        transition-duration=".3s"
        item-selector=".item"
        class="masonry-container"
      >
        <div
          v-for="(item, index) in blocks"
          :key="index"
          v-masonry-tile
          class="item"
          :style="{ height: item.height + 'px' }"
        >
          <p>{{ item.content }} - {{ index }}</p>
        </div>
      </div>
    </no-ssr>
  </section>
</template>

<script>
export default {
  data: () => {
    return {
      blocks: []
    }
  },

  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      // 创建50个测试数据，高度为50-400之间
      for (let index = 0; index < 50; index++) {
        this.blocks.push({
          height: Math.round(Math.random() * 350 + 50),
          content: '图片内容'
        })
      }
    }
  }
}
</script>

<style>
.masonry-container {
  width: 1620px;
  margin: 0 auto;
}

@media screen and (max-width: 1620px) {
  .masonry-container {
    width: 1350px;
  }
}
@media screen and (max-width: 1350px) {
  .masonry-container {
    width: 1080px;
  }
}

.item {
  width: 250px;
  border: 1px solid #f00;
  margin: 10px;
}
</style>
